<script setup lang='ts'>
import { useIndexStore } from '@/stores/index'
import { getCameraListApi } from '@/apis/user'
import { reactive } from 'vue'
import { showToast } from 'vant'
import { useRouter } from 'vue-router'

const router = useRouter()
const indexStore = useIndexStore()
const ispc = indexStore.ispc

// 全部摄像机列表
const allCameraList = reactive([
    {
        itemid: 'c01',
        stream_id: '',
        title: '面套开发区摄像机',
        cimg: new URL('@/assets/img/l1.png', import.meta.url).href,
        cameraUrl: '',
        isactive: false
    }, {
        itemid: 'c02', stream_id: '',
        title: '功能检验区摄像机',
        cimg: new URL('@/assets/img/l2.png', import.meta.url).href,
        cameraUrl: '',
        isactive: false
    }, {
        itemid: 'c03', stream_id: '',
        title: '发泡试制区摄像机',
        cimg: new URL('@/assets/img/l3.png', import.meta.url).href,
        cameraUrl: '',
        isactive: false
    }, {
        itemid: 'c04', stream_id: '',
        title: '全景左摄像机',
        cimg: new URL('@/assets/img/l4.png', import.meta.url).href,
        cameraUrl: '',
        isactive: false
    }, {
        itemid: 'c05', stream_id: '',
        title: '零部件加工区摄像机',
        cimg: new URL('@/assets/img/l5.png', import.meta.url).href,
        cameraUrl: '',
        isactive: false
    }, {
        itemid: 'c06', stream_id: '',
        title: '智能制造区左摄像机',
        cimg: new URL('@/assets/img/l6.png', import.meta.url).href,
        cameraUrl: '',
        isactive: false
    }, {
        itemid: 'c07', stream_id: '',
        title: '综合区摄像机',
        cimg: new URL('@/assets/img/l7.png', import.meta.url).href,
        cameraUrl: '',
        isactive: false
    }, {
        itemid: 'c08', stream_id: '',
        title: '智能制造区右摄像机',
        cimg: new URL('@/assets/img/l6.png', import.meta.url).href,
        cameraUrl: '',
        isactive: false
    }, {
        itemid: 'c09', stream_id: '',
        title: '共享讨论区摄像机',
        cimg: new URL('@/assets/img/l9.png', import.meta.url).href,
        cameraUrl: '',
        isactive: false
    }, {
        itemid: 'c10', stream_id: '',
        title: '全景右摄像机',
        cimg: new URL('@/assets/img/l4.png', import.meta.url).href,
        cameraUrl: '',
        isactive: false
    }
])

let cameraList = reactive([])
// 获取token
const token = localStorage.getItem('token')
// 查询当前用户数据权限列表
const getCameraList = async () => {
    const res = await getCameraListApi({ token })
    // console.log(res)
    if (res.data.code === 200) {
        cameraList = res.data.data.streams
        cameraList.forEach(item => {
            allCameraList.forEach(item2 => {
                if (item2.itemid === item.tag) {
                    item2.cameraUrl = item.player_m3u8_url
                    item2.isactive = true
                    item2.stream_id = item.stream_id
                }
            })
        })
        // console.table(allCameraList);
    } else {
        showToast(res.data.msg)
    }
}

getCameraList()

// 
const toCameraInfo = (id, isactive, stream_id) => {
    if (!isactive) {
        return showToast('正在规划中')
    }
    router.replace({ path: '/cn/live', query: { id, stream_id } })
}

</script>

<template>
    <div class="map_local box bg3 clmcenter">
        <img src="@/assets/img/logo.png" class="logo" alt="logo">
        <img src="@/assets/img/back.png" class="btn_goback" @click="$router.replace('/cn/main')">
        <div class="container clmstart">
            <div class="stitle">
                <img src="@/assets/img/title_left.png" class="title_left anileft" />
                <p>现场参观区域分布图</p>
                <img src="@/assets/img/title_right.png" class="title_right aniright" />
            </div>
            <div class="mapbox" :style="{ marginTop: ispc ? '' : '6vw', marginLeft: ispc ? '' : '2vw' }">
                <div :class="['cameraitem', 'citem' + (index + 1)]" v-for="(item, index) in allCameraList"
                    :key="item.itemid" :style="index == 3 ? { left: ispc ? '' : '-3.5vw' } : ''">
                    <img :src="item.cimg" class="cimg" v-if="index >= 4">
                    <div class="ctitlebox animate__animated animate__fadeInUp"
                        :style="{ '-webkit-filter': item.isactive ? '' : 'grayscale(100%)', filter: item.isactive ? '' : 'grayscale(100%)' }"
                        @click="toCameraInfo(item.itemid, item.isactive, item.stream_id)">
                        <p class="ctitle">{{ item.title }}</p>
                    </div>
                    <img :src="item.cimg" class="cimg" v-if="(index < 4 && ispc) || (index < 3 && !ispc)">
                    <img src="@/assets/img/l14.png" class="cimg" :style="{ width: '2.5vw' }" v-if="index == 3 && !ispc">
                </div>

                <!-- 面套开发区摄像机 -->
                <!-- <div class="cameraitem citem1">
                    <div class="ctitlebox animate__animated animate__fadeInUp"
                        @click="$router.replace({ path: '/cn/live', query: { title: '面套开发区', cameralist: [''] } })">
                        <p class="ctitle">面套开发区摄像机</p>
                    </div>
                    <img src="@/assets/img/l1.png" class="cimg">
                </div> -->
                <!-- 功能检验区摄像机 -->
                <!-- <div class="cameraitem citem2">
                    <div class="ctitlebox animate__animated animate__fadeInUp"
                        @click="$router.replace({ path: '/cn/live', query: { title: '功能检验区', cameralist: [''] } })">
                        <p class="ctitle">功能检验区摄像机</p>
                    </div>
                    <img src="@/assets/img/l2.png" class="cimg">
                </div> -->
                <!-- 发泡试制区摄像机 @click="$router.replace({ path: '/cn/live', query: { title: '发泡试制区', cameralist: [''] } })"-->
                <!-- <div class="cameraitem citem3">
                    <div class="ctitlebox animate__animated animate__fadeInUp" @click="fapaoClick">
                        <p class="ctitle">发泡试制区摄像机</p>
                    </div>
                    <img src="@/assets/img/l3.png" class="cimg">
                </div> -->
                <!-- 全景左摄像机 -->
                <!-- <div class="cameraitem citem4" :style="{ left: ispc ? '' : '-3.5vw' }">
                    <div class="ctitlebox animate__animated animate__fadeInLeft"
                        @click="$router.replace({ path: '/cn/live', query: { title: '全景', cameralist: ['', ''] } })">
                        <p class="ctitle">全景左摄像机</p>
                    </div>
                    <img src="@/assets/img/l4.png" class="cimg" v-if="ispc">
                    <img src="@/assets/img/l14.png" class="cimg" :style="{ width: '2.5vw' }" v-else>
                </div> -->
                <!-- 零部件加工区摄像机 -->
                <!-- <div class="cameraitem citem5">
                    <img src="@/assets/img/l5.png" class="cimg">
                    <div class="ctitlebox animate__animated animate__fadeInUp"
                        @click="$router.replace({ path: '/cn/live', query: { title: '零部件加工区', cameralist: [''] } })">
                        <p class="ctitle">零部件加工区摄像机</p>
                    </div>
                </div> -->
                <!-- 智能制造区左摄像机 -->
                <!-- <div class="cameraitem citem6">
                    <img src="@/assets/img/l6.png" class="cimg">
                    <div class="ctitlebox animate__animated animate__fadeInUp"
                        @click="$router.replace({ path: '/cn/live', query: { title: '智能装配区', cameralist: ['', ''] } })">
                        <p class="ctitle">智能制造区左摄像机</p>
                    </div>
                </div> -->
                <!-- 综合区摄像机 -->
                <!-- <div class="cameraitem citem7">
                    <img src="@/assets/img/l7.png" class="cimg">
                    <div class="ctitlebox animate__animated animate__fadeInUp"
                        @click="$router.replace({ path: '/cn/live', query: { title: '综合区', cameralist: [''] } })">
                        <p class="ctitle">综合区摄像机</p>
                    </div>
                </div> -->
                <!-- 智能制造区右摄像机 -->
                <!-- <div class="cameraitem citem8">
                    <img src="@/assets/img/l6.png" class="cimg">
                    <div class="ctitlebox animate__animated animate__fadeInUp"
                        @click="$router.replace({ path: '/cn/live', query: { title: '智能制造区', cameralist: ['', ''] } })">
                        <p class="ctitle">智能制造区右摄像机</p>
                    </div>
                </div> -->
                <!-- 共享讨论区摄像机 -->
                <!-- <div class="cameraitem citem9">
                    <img src="@/assets/img/l9.png" class="cimg">
                    <div class="ctitlebox animate__animated animate__fadeInUp"
                        @click="$router.replace({ path: '/cn/live', query: { title: '共享讨论', cameralist: [''] } })">
                        <p class="ctitle">共享讨论区摄像机</p>
                    </div>
                </div> -->
                <!-- 全景右摄像 -->
                <!-- <div class="cameraitem citem10">
                    <img src="@/assets/img/l4.png" class="cimg">
                    <div class="ctitlebox animate__animated animate__fadeInRight"
                        @click="$router.replace({ path: '/cn/live', query: { title: '全景', cameralist: ['', ''] } })">
                        <p class="ctitle">全景右摄像机</p>
                    </div>
                </div> -->
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.map_local {
    overflow: hidden;
    .container {
        position: relative;
        width: 100%;
        .mapbox {
            position: relative;
            width: 82.45vw;
            height: 20.83vw;
            margin-top: 10vw;
            margin-bottom: 5.83vw;
            background: url('@/assets/img/map.png') no-repeat;
            background-size: 100% 100%;
            .cameraitem {
                position: absolute;
                .ctitlebox {
                    width: 100%;
                    cursor: pointer;
                    .ctitle {
                        font-size: 1.33vw;
                        color: #ffffff;
                        text-align: center;
                        line-height: 1.85;
                    }
                }
                .cimg {
                    position: relative;
                    z-index: 2;
                }
            }
            .citem1,
            .citem2,
            .citem3,
            .citem5,
            .citem6,
            .citem8 {
                width: 15.42vw;
                .ctitlebox {
                    height: 2.5vw;
                    background: url('@/assets/img/cn/b1.png') no-repeat;
                    background-size: 100% 100%;
                }
                .cimg {
                    width: 0.73vw;
                }
            }
            .citem1,
            .citem2,
            .citem3 {
                top: -4.583vw;
                .cimg {
                    margin-left: 3.33vw;
                    margin-top: -0.6vw;
                }
            }
            .citem1 {
                left: 15.677vw;
            }
            .citem2 {
                left: 32.1vw;
            }
            .citem3 {
                left: 58.5vw;
            }
            .citem4,
            .citem10 {
                display: flex;
                margin-top: 9.22vw;
                .ctitlebox {
                    width: 3.177vw;
                    height: 11.09375vw;
                    .ctitle {
                        display: flex;
                        align-items: center;
                        width: 80%;
                        height: 100%;
                        line-height: 1.1;
                        text-align: center;
                        word-break: break-all;
                    }
                }
                .cimg {
                    width: 3.85vw;
                    height: 0.73vw;
                    margin-top: 7.5vw;
                }
            }
            .citem4 {
                left: -5.16vw;
                .ctitlebox {
                    background: url('@/assets/img/cn/b4.png') no-repeat;
                    background-size: 100% 100%;
                    .ctitle {
                        margin-left: 5%;
                    }
                }
                .cimg {
                    margin-left: -0.9vw;
                }
            }
            .citem10 {
                right: -5.35vw;
                .ctitlebox {
                    margin-left: -0.9vw;
                    background: url('@/assets/img/cn/b7.png') no-repeat;
                    background-size: 100% 100%;
                    .ctitle {
                        margin-left: 12%;
                    }
                }
            }
            .citem5,
            .citem6,
            .citem7,
            .citem8, .citem9 {
                .ctitlebox {
                    margin-top: -0.6vw;
                }
            }
            .citem5 {
                left: 2.5vw;
                top: 14.9vw;
                .cimg {
                    margin-left: 4.11vw;
                }
            }
            .citem6,
            .citem8 {
                top: 18.18vw;
                .cimg {
                    width: 5.83vw;
                    margin-left: 13.85vw;
                }
            }
            .citem6 {
                left: 19.17vw;
            }
            .citem8 {
                left: 53.49vw;
            }
            .citem7 {
                left: 38.59vw;
                top: 19.43vw;
                .ctitlebox {
                    width: 10.68vw;
                    height: 2.5vw;
                    background: url('@/assets/img/cn/b3.png') no-repeat;
                    background-size: 100% 100%;
                }
                .cimg {
                    margin-left: 0.99vw;
                    width: 0.73vw;
                }
            }
            .citem9 {
                left: 73.18vw;
                top: 17.03vw;
                .ctitlebox {
                    width: 13.96vw;
                    height: 2.4vw;
                    background: url('@/assets/img/cn/b2.png') no-repeat;
                    background-size: 100% 100%;
                }
                .cimg {
                    margin-left: 2.34vw;
                    width: 0.73vw;
                }
            }
        }
    }
}
</style>